import React from 'react';
import { Modal } from 'antd';
import FlowParameters from 'components/flowdetailpannel/FlowParameters';
import { openNotificationWithIcon } from 'utils/comm';

class FlowParamsSelector extends React.Component {

  state = {
    selectedRows: [],
  };

  openNotificationWithIcon = openNotificationWithIcon.bind(this);

  handleOk = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    const { selectedRows } = this.state;
    this.setState({ selectedRows:[] });
    const { onOk } = this.props;
    if (typeof onOk === "function") {
      onOk(selectedRows);
    }
  }

  handleCancel = () => {
    const { onCancel } = this.props;
    this.setState({ selectedRows:[] });
    onCancel();
  }

  render() {
    const { visible, value } = this.props;
    return (
      <Modal
        title="添加变量"
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        width='642px'
        centered
        destroyOnClose
      >
        <FlowParameters
          editable={false}
          onChange={v => this.setState({ selectedRows: v })}
          onError={msg => {
            this.openNotificationWithIcon("error", '', msg);
          }}
          value={value}
        />
      </Modal>
    );
  }
}
export default FlowParamsSelector;
